<template>
  <div style="height: 100vh;background-size: cover;background-color: rgba(169,169,169,0.24)">

    <div class="row">
       <span>目前在线：{{rsize}}人</span>

        <el-button @click="test" style="margin-left: 40%"  type="success">二维码</el-button>


      <span style="position: absolute;right: 20px" @click="sz">
          <i class="el-icon-s-tools" ></i>
      </span>
    </div>

    <div id="aa" style="overflow: auto;height: 100%" >
      <div v-for="data in data" style="margin-bottom: 10px;background-color: #ffffff;border-radius: 10px;" @dblclick="dz(data.from)" >
        <span>{{data.from+": "}}</span>
        <span :style="{color:data.color1,fontSize:data.size}">{{data.content}}</span>
      </div>
    </div>

    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <div ref="qrcode">

      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

<script>
import  QRCode from  "qrcodejs2"
export default {
  name: "index",
  data(){
    return{
      data:[],
      content:'',
      color1:null,
      username:'',
      chatid:'1234',
      socket:null,
      updata:{},
      size:'',
      rsize:'',
      aa:null,
      aaa:'',
      qrcode: null,
      dialogVisible: false,
      number:0
    }
  },
  methods:{

    test(){
      console.log(this.number)
      this.dialogVisible=true
      this.$nextTick(() => {
        if (this.qrcode==null){
          this.qrcode = new QRCode(this.$refs.qrcode, {
            width: 256,
            height: 256,
            text: "http://192.168.1.3:8080"
          })
        }

      })
    },
    sz(){

      this.$router.push({
        name:'admin'
      })

    },


    init(){
      this.socket =new WebSocket("ws://192.168.1.3:9090/chat/system/1234")
      this.socket.onerror=this.bbb

      this.socket.onopen=this.open
      this.socket.onmessage=this.get


    },
    bbb(a){
      alert(a)
      console.log(a)
    },
    open (){

      console.log("socket连接成功")

    },

    get(msg){

      console.log(msg)
      let  data =JSON.parse(msg.data)
      this.rsize=data.size

      let data1=JSON.parse(data.content)
      this.data.push(data1)
      console.log(this.data)
      console.log(data)

    },
    off(){
      this.socket.close
    }

  },
  mounted() {
    this.number =Math.floor(Math.random()*900000)+ 100000;
    console.log(this.number)
    this.init()

  },
  // beforeRouteLeave(){
  //   this.off()
  //
  // }
}
</script>

<style scoped>
.row{
  display: flex;
  flex-direction: row;
}
*{
  padding: 0;
  margin: 0;
}
html{
  padding: 0;
  margin: 0;
}
</style>